<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <h1>欢迎YY来到千锋</h1>

    <p>
        <span>序号</span>
        <span>用户名</span>
        <span>密码</span>
    </p>

    <ul>
        <!-- <li>
            <span>1</span>
            <span>yy</span>
            <span>123</span>
        </li> -->
    </ul>

    <script>

        // 在cookie中   实际上允许各种各样的数据
        //    账号和密码
        //    登录信息
        //    手机号
        //    。。。








        const cookies = document.cookie;    // username=yy; userpwd=123
        let arr = cookies.split('; ');
        console.log(arr);

        arr = arr.map(v => {
            let arr = v.split('=');
            return {
                name: arr[0],
                content: arr[1]
            }
        })

        console.log(arr);

        let username = arr.filter( v => v.name === 'login_user')[0].content ;
        console.log(username);
        const oH1 = document.querySelector('h1') ;
        oH1.innerHTML = username ;


        let html = '' ;
        arr.forEach( (v , i) => {
            const {name , content} = v ;
            html += `
            <li>
                <span>${i + 1}</span>
                <span>${name}</span>
                <span>${content}</span>
                <span>修改密码</span>
                <span>删除</span>
            </li>
            `
        })

        console.log(html);

        const oUl = document.querySelector('ul') ;
        oUl.innerHTML = html ;


    </script>

</body>

</html>